<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>主页</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="keywords" name="keywords" content="" />
    <meta http-equiv="description" name="description" content="" />
    <link href="css/ydui.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css" rel="stylesheet">
    <script src="js/ydui.flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/all.css?v=201850002"/>
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_379511_w4u7dyknvu.css"/>
</head>
	<body>
		<div class="g-flexview"  id="app" v-cloak>
			<div class="g-scrollview">
				<div id="calendar"></div>
				<div>
					<ul class="tab-nav">
		                <li class="tab-nav-item" v-bind:class="{'tab-active':type=='1'}"  v-on:click="change(1)"><a href="javascript:;">正在学习</a></li>
		                <li class="tab-nav-item" v-bind:class="{'tab-active':type=='0'}"  v-on:click="change(0)"><a href="javascript:;">等待学习</a></li>
		                <li class="tab-nav-item"  v-bind:class="{'tab-active':type=='2'}" v-on:click="change(2)"><a href="javascript:;">已完成学习</a></li>
		            </ul>						
				</div>			
				<article class="m-list list-theme4">
		            <div  class="list-item" v-for="el in list">                
		                <div class="list-mes">
		                    <h3 class="list-title">{{el.name}}</h3>
		                    <div class="list-mes-item">
		                        <div>
		                        	创建人:
		                            <span class="list-price">{{el.realName}}</span>
		                        </div>
		                        <div>{{el.startTime}}</div>
		                    </div>
		                </div>
		                <div class="list-button">
		                	<a v-on:click="teamrole(el)" v-if="el.type!=0">进入课程</a>
		                </div>		                
		            </div>
		        </article>				
			</div>
			<footer class="m-tabbar tabbar-fixed">
	            <a href="index.html" class="tabbar-item">
	                <span class="tabbar-icon">
	                    <i class="iconfont icon-kaike"></i>
	                </span>
	                <span class="tabbar-txt">开课列表</span>
	            </a>
	            <a href="mycourse.html" class="tabbar-item  tabbar-active">
	                <span class="tabbar-icon">
	                    <i class="iconfont icon-kecheng1"></i>
	                </span>
	                <span class="tabbar-txt">我的课程</span>
	            </a>

	        </footer>			
		</div>
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script src="js/ydui.js"></script>
	<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var model= new Vue({
			el:'#app',
			data:{
				datalist:[],
				completedata:[],
				waitdata:[],
				list:[],
				type:"1",
				pagesize:1,
				pageNum:10
			},
			methods:{

				teamrole:function(el){
					window.location.href='coursedetail.html?'+'courseId='+el.courseId
				},					
				change:function(el){
					model.type=el;
					model.get()				
				},
				get:function(){
					ComFunJS.getJSON(ComFunJS.APIURL('/course/study'),{type:model.type,pageSize:10,pageNum:1},function(r){
						if(!r.error){
							model.list=r
						}else{
							ComFunJS.showMsg('请重新登陆！','error'); 
							window.location.href='login.html'
						}
					})
				},			
			},
			created:function(){
				
				this.$nextTick(function(){
					model.get();
				})
			}
		})
	</script>
</html>
